<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:include="base/page/header :: headerTiFragment" />

<body>
	<div th:include="base/page/menu-user :: menuTiFragment"></div>

	<div class="container">
		<fieldset>
			<legend class="text-info">View Dashboard</legend>
		</fieldset>
	</div>
	<div class="container" id="container" style="min-width: 360px; height: 500px; margin: 0 auto"></div>

<script type="text/javascript">
//<![CDATA[
$(function () {
        $('#container').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'Monthly Average TimeFrame'
            },
            xAxis: {
                categories: [
                    'Jan',
                    'Feb',
                    'Mar',
                    'Apr',
                    'May',
                    'Jun',
                    'Jul',
                    'Aug',
                    'Sep',
                    'Oct',
                    'Nov',
                    'Dec'
                ]
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Days'
                },
                allowDecimals: false
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y} Days</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{
                name: 'TimeFrame1',
                data: [49, 71, 106, 129, 144, 176, 135, 148, 216, 194, 95, 54]
    
            }, {
                name: 'TimeFrame2',
                data: [83, 78, 98, 93, 106, 84, 105, 104, 91, 83, 106, 92]
    
            }, {
                name: 'TimeFrame3',
                data: [48, 38, 39, 41, 47, 48, 59, 59, 52, 65, 59, 51]
    
            }, {
                name: 'TimeFrame4',
                data: [42, 33, 34, 39, 52, 75, 57, 60, 47, 39, 46, 51]
    
            }]
        });
    });
//]]>
</script>
</body>
</html>